<style>
	.amap-wrapper {
		float: left;
		width: 100%;
		height:96%;
		
	}
	
	.amap-demo {
			
	}
</style>
<template>
	<div>
		<Modal v-model="modalShow" :closable='false' :mask-closable=false fullscreen>
			<p slot="header">车辆位置</p>
               
					<div id="map" class="amap-wrapper" style="text-align: center;display: none;">
								<el-amap vid="amap" :plugin="mapData.plugin" class="amap-demo" :center="mapData.center" :zooms="mapData.zooms" style="margin-bottom: 10px;">
									<el-amap-marker vid="amap" :position="mapData.center"></el-amap-marker>
								</el-amap>
								<div class="toolbar" style="font-weight:bold;font-size: 18px;">
									<!--position: [{{ mapData.lon }}, {{ mapData.lat }}] -->
									
									状态：{{mapData.gps_status_text}}
									当前车速: {{mapData.speed}}
									车辆位置: {{ mapData.dot_address }}
									
									
								</div>
					</div>

			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
			</div>
		</Modal>

	</div>
</template>
<script>
	import {
		getPos
	} from '@/api/car'

	//import Editor from '_c/editor'
	//import Upload from '_c/common/upload'
	export default {
		components: {
			//  Editor,
			//  Upload
		},
		props: {
			modalId: {
				type: Number,
				default: 0
			}
		},
		created() {
			let t = this;
			if(this.modalId > 0) {
				this.getPos()
			}
		},
		data() {
			let t = this;
			return {
				modalShow: true,
				saveLoading: false,
				//地图
				mapData: {
					center: [121.59996, 31.197646],
					zooms: [16, 20],
					lon: 0,
					lat: 0,
					dot_address: '',
					gps_status_text:'',
					speed:''
				}
				
			}
		},
		methods: {
			getPos() {
				let t = this
				getPos(t.modalId).then(res => {
//					console.log(res);
					if(res.data.code == 1){
						
						document.getElementById("map").style.display="";//隐藏
						
						
						let res_data = res.data.data;
						
							t.mapData.lon = res_data.lon;
							t.mapData.lat = res_data.lat;
							t.mapData.center = [t.mapData.lon, t.mapData.lat];
							t.mapData.gps_status_text = res_data.gps_status_text;
							t.mapData.speed = res_data.speed;
							
							var geocoder = new AMap.Geocoder({
								radius: 1000,
								extensions: "all"
							});
							geocoder.getAddress([t.mapData.lon, t.mapData.lat], function(status, result) {
								if(status === 'complete' && result.info === 'OK') {
									if(result && result.regeocode) {
										t.mapData.dot_address = result.regeocode.formattedAddress;
										t.$nextTick();
									}
								}
							});
							
					}else{
						t.$Notice.error({
							title: res.data.msg
						})
//						t.mapData.center = [0,0];
						
						this.$emit('on-map-modal-hide')
						this.modalShow = false
					}
					
				})

			},
			cancel() {
				this.$emit('on-map-modal-hide')
				this.modalShow = false
			},
		},

	}
</script>